<template>
    <div class="large_border" :style="{ width: props.width, height: props.height }">
        <div class="large_content">
            <div class="large_header">
                <div class="large_header_flborder"></div>
                <span>{{ props.text }}</span>
                <img :src="xiaobiaoti" />
            </div>
            <slot />
        </div>
    </div>
</template>

<script setup lang="ts">
import xiaobiaoti from '@img/xiaobiaoti.png';

interface Props {
    width: string;
    height?: string;
    text: string;
}
const props = withDefaults(defineProps<Props>(), {
    width: '',
    height: '',
    text: ''
});
</script>
<style lang="scss" scoped>
$borderW: 3px;
@mixin circle($top: 5px, $bottom: 5px) {
    position: absolute;
    top: $top;
    bottom: $bottom;
    left: 0;
    width: 2px;
    height: 2px;
    background: #d5e9ff;
    content: '';
}
.large {
    &_border {
        position: relative;
    }
    &_content {
        width: 100%;
        height: 100%;
        padding: 15px 10px 10px;
        background: rgba(3, 33, 58, 0.8);
        box-sizing: border-box;
    }
    &_header {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
        height: 22px;
        &_flborder {
            width: 2px;
            height: 13px;
            background: #0066ff;
            position: absolute;
            left: -10px;
            top: -2px;
            &::before {
                @include circle(-2px, 0);
            }
            &::after {
                @include circle(auto, 0px);
            }
        }
        img {
            width: 100%;
            height: auto;
        }
        span {
            font-size: 14px;
            position: absolute;
            left: 0px;
            top: -3px;
            color: #fff;
            @include pmzd();
            letter-spacing: 2px;
        }
    }
}
</style>
